<template>
	<view :style="{'--color': color, '--total-height': totalHeight + 'px'}">
		<view class="page text-center" v-if="flag == 1">
			<status-bar title='支付完成' delta='2'></status-bar>
			<view class="pay_scs_info success">
				<text class="iconfont icon-success"></text>
				<view class="size36 m-top30 m-bot50">{{ type == 2 ? '充值成功' : '订单支付完成' }}</view>
				<view class="color_99" v-if="type == 1">支付完成，请确定订单无误后再确认收货哦！</view>
			</view>
			<view class="m-bot30">
				<view class="btn thmeBg white" @click="toPage(3)" v-if="type == 2">查看余额</view>
				<view class="btn thmeBg white" @click="toPage(1)" v-else>查看订单</view>
			</view>
			<view><view class="btn thmeBorder thmeColor" @click="toPage(2)">返回首页</view></view>
		</view>

		<view v-if="flag == 2">
			<view v-if="pageSet.style == 0">
				<view class="nav" :class="{'white': !toTop, 'color_22 bgwhite': toTop}">
					<view :style="{height: System.statusBarHeight + 'px'}"></view>
					<view class="p-left30" :style="{'line-height': navHeight + 'px'}">
						<text class="iconfont icon-xiangzuo size36" @click="back(2)"></text>
					</view>
				</view>
				<view class="topArea thmeBg white text-center">
					<text class="iconfont icon-success size120"></text>
					<view class="size36 m-top10 m-bot80">{{ type == 2 ? '充值成功' : '支付成功' }}</view>
					<view class="d-flex j-centert">
						<view class="btn-2 whitebor flexac" @click="toPage(3)" v-if="type == 2">查看余额</view>
						<view class="btn-2 whitebor flexac" @click="toPage(1)" v-else>查看订单</view>
						<view class="btn-2 whitebor flexac m-left40" @click="toPage(2)">返回首页</view>
					</view>
				</view>
			</view>
			<view v-if="pageSet.style == 1">
				<status-bar title=' ' delta='2'></status-bar>
				<view class="p-top80 p-bot80 text-center">
					<text class="iconfont icon-success size120 success"></text>
					<view class="size36 success m-top10 m-bot80">{{ type == 2 ? '充值成功' : '支付成功' }}</view>
					<view class="d-flex j-centert">
						<view class="btn-2 thmeBg white flexac" @click="toPage(3)" v-if="type == 2">查看余额</view>
						<view class="btn-2 thmeBg white flexac" @click="toPage(1)" v-else>查看订单</view>
						<view class="btn-2 thmeBorder thmeColor flexac m-left40" @click="toPage(2)">返回首页</view>
					</view>
				</view>
			</view>
			<!-- 组件 -->
			<view v-if="pageData.length">
				<block v-for="(item,index) in pageData" :key="index">
					<product v-if="item.type == 'goodsDisplay'" :pageData="item.compCont"></product>
					<tabs v-if="item.type == 'goodsGroup'" :pageData="item.compCont" ref="tabs"></tabs>
					<coupon v-if="item.type == 'coupon'" :pageData="item.compCont"></coupon>
					<seckill v-if="item.type == 'seckill'" :pageData="item.compCont"></seckill>
					<groupBuy v-if="item.type == 'groupBuy'" :pageData="item.compCont"></groupBuy>
					<bargain v-if="item.type == 'bargain'" :pageData="item.compCont"></bargain>
					<textTitle v-if="item.type == 'text'" :pageData="item.compCont"></textTitle>
					<parseContent v-if="item.type == 'richText'" :pageData="item.compCont"></parseContent>
					<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
					<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
					<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
				</block>
			</view>
		</view>

		<dCoupon v-if="isCoupons" :couponArry="getcouponsArry" @closeFunc="isCoupons = false"></dCoupon>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import dCoupon from "../../components/Coupons.vue"
	// diy组件
	import product from '@/components/home/product.vue'
	import tabs from '@/components/home/tabs.vue'
	import coupon from '@/components/home/coupon.vue'
	import seckill from '@/components/home/seckill.vue'
	import groupBuy from '@/components/home/groupBuy.vue'
	import bargain from '@/components/home/bargain.vue'
	import textTitle from '@/components/home/textTitle.vue'
	import parseContent from '@/components/home/parseContent.vue'
	import adv from '@/components/home/adv.vue'
	import hotZone from '@/components/home/hotZone.vue'
	import divider from '@/components/home/divider.vue'
	export default {
		components: {
			dCoupon,
			product,
			tabs,
			coupon,
			seckill,
			groupBuy,
			bargain,
			textTitle,
			parseContent,
			adv,
			hotZone,
			divider
		},
		data() {
			return {
				isCoupons: false,
				getcouponsArry: '',
				warehouse_mode: 0, // 我的订单0、我的仓库1
			    timer1: null,
				flag: 0, // 1原样式、2使用diy
				pageSet: {style: 0},  // 页面设置
				pageData: '', // diy组件
				toTop: false,
				type: '1' // 1支付、2充值
			}
		},
		computed: {
			...mapState(['color', 'vid', 'totalHeight', 'System', 'navHeight'])
		},
		onLoad(e) {
			this.diyget()
			if(e.playid) this.getCoupon(e.playid)
			if(e.type) this.type = e.type
		},
		onShow() {
			if(uni.getStorageSync('path') == '11') { // 订单页返回
				let homePage = getApp().globalData.homePage
				if(homePage.indexOf('home') > -1) {
					uni.reLaunch({
						url: '/pages/user/user'
					})
				}else {
					uni.reLaunch({
						url: homePage
					})
					uni.setStorageSync('path', '-1')
				}
			}
		},
		methods: {
			diyget(){
				this.$http.get({
					url: '/newdiy/api/v1/diy/getDiyPage',
					data: {
						front: 1,
						type: 6
					}
				}).then(res=>{
					if (res.data) {
						if (res.data.pageSet) {
							this.pageSet = res.data.pageSet
							this.pageData = res.data.front_value || []
							this.flag = 2
						} else { // 新建了但未点保存
							this.flag = 1
						}
					} else { // 未新建模板
						this.flag = 1
					}
				})
			},
			toPage(i){
				clearInterval(this.timer1)
				if(i == 1 && this.warehouse_mode == 1) return this.$rectTo('/warehouse/house')
				if(i == 1 && this.warehouse_mode == 0) return this.$rectTo('orderList')
				if(i == 2) return this.backHome()
				if(i == 3) return this.$rectTo('/moneyPage/capital/myMoney')
			},
			getCoupon(id){
				this.timer1 = setInterval(()=>{
					this.$http.post({
						url: '/SRA_simMallApi/getNewCouponsLog',
						data: {
							vId: this.vid,
							orderAesStr: id
						}
					}).then(res=>{
						if(res.code != 100) return clearInterval(this.timer1)
						if(res.warehouse_mode) this.warehouse_mode = res.warehouse_mode
						if(res.data && res.data.length > 0) {
							this.getcouponsArry = res.data
							this.isCoupons = true
							clearInterval(this.timer1)
						}
					})
				}, 1000)
			}
		},
		onBackPress() {
			uni.setStorageSync('path', 12)
		},
		onUnload() {
			clearInterval(this.timer1)
		},
		onPageScroll(e) {
			if(e.scrollTop > 100){
				this.toTop = true
			} else{
				this.toTop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay_scs_info {
		padding: 200rpx 0 280rpx;
		.icon-success {
			font-size: 160rpx;
		}
	}
	.btn {
		width: 240rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		display: inline-block;
		border-radius: 6px;
		font-size: 32rpx;
	}
	.nav {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
	}
	.topArea {
		padding-top: calc(80rpx + var(--total-height));
		padding-bottom: 80rpx;
	}
	.btn-2 {
		width: 210rpx;
		height: 70rpx;
		border-radius: 35rpx;
		font-size: 32rpx;
	}
	.success {
		color: #0e932e;
	}
</style>
